<template>
  <view>
    <navbar></navbar>
    <view class="container">
		<view class="title">
			<view class="">
				手机号
			</view>
			<view class="">
				邀请状态
			</view>
		</view>
    <view class="invite-list">
		<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltolower="lower" @scroll="scroll"> -->
		  	<view class="invite-item" v-for="item in list" :key="item.id">
		  				<view class="mobile">{{item.phone}}</view>
		  				<view v-if="item.realName" class="real-name">已实名</view>
		  				<view v-if="item.pay_money" class="pay_money">已消费</view>
		  	   <!-- <view class="avatar">
		  	      <image class="image" mode="aspectFill" :src="item.avatarUrl"></image>
		  	    </view> -->
		  	    <!-- <view class="date">{{item.create_time}}</view> -->
		  	  </view>
		  	
		  	  <view v-if="loading" class="loading-text">加载中...</view>
		  	  <view v-if="!hasMore && list.length > 8" class="loading-text">没有更多了</view>
		  	  <view v-if="!hasMore && !loading && list.length == 0" class="yoshop-notcont">
		  	    <i class="dy-iconfont icon-empty large"></i>
		  	    <view class="cont">暂无数据~</view>
		  	  </view>
		<!-- </scroll-view> -->
	</view>
		 
        
    </view>
  </view>
</template>

<script>
const app = getApp();
import navbar from "@/components/navbar/navbar";
export default {
  components: {
    navbar
  },
  data() {
    return {
      loading:false,
      hasMore:false,
      params:{
        page:1,
      },
      list:[],
	  scrollTop: 0,
	  old: {
	  	scrollTop: 0
	  }
    }
  },
  onPullDownRefresh: function () {
    this.params.page = 1;
    this.getPageData(function () {
      uni.stopPullDownRefresh();
    });
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (!this.loading && this.hasMore) {
      this.params.page +=1;
      this.getPageData();
    }
  },
  onLoad(){
    this.getPageData();
  },
  created() {
  	this.getPageData();
  },
  methods: {
	lower(){
		console.log(1)
		if (!this.loading && this.hasMore) {
		  this.params.page +=1;
		  this.getPageData();
		}
	},
	scroll(e) {
		console.log(e)
		this.scrollTop = e.detail.scrollTop
	},
    getPageData(callback){
      this.loading = true;
      app._get('inviter/lists', this.params, res => {
        let {current_page,data,last_page} = res.data;
        data = data.map(item=>{
          let user = item.user || {};
          let newItem = {
            create_time:this.getFormatTime(item.create_time),
            avatarUrl:user.avatarUrl || '--',
            phone:user.phone || '--',
            nickName:user.nickName || '--',
            realName: 0 < user.address_id,
			pay_money: parseInt(user.pay_money)
          }
          return newItem;
        })
        if(current_page == 1){
          this.list = data;
        }else{
          this.list = [...this.list,...data];
        }
        this.params.page = current_page;
        this.hasMore = last_page>current_page;
      }, null, () => {
        uni.hideLoading();
        this.loading = false;
        typeof callback === 'function' && callback();
      });
    },
    // 时间格式化
    getFormatTime(time){
      if(!time || typeof time !== 'string'){
        return '';
      }

      let newTime = '';
      let nowYear = new Date().getFullYear();
      let timeYear = Number(time.substr(0,4));

      // 年份小于今年,显示年
      if(timeYear<nowYear){
        newTime += timeYear + '年';
      }

      newTime += time.substr(5,2) + '月';
      newTime += time.substr(8,2) + '日';
      return newTime;
    },
  }
}
</script>

<style lang="scss" scoped>
.container{
  box-sizing: border-box;
  min-height: 100vh;
  padding:0rpx 20rpx;
  background: #ffffff;
  .title{
	  // position: fixed;
	  // z-index: 99;
	  background-color: #fff;
	  height: 100rpx;
	  line-height: 100rpx;
  	  display: flex;
  	  flex-direction: row;
  	  justify-content: space-between;
	  margin: 0 23%;
  }
}

.invite-item:nth-child(odd){
  // margin-top: 30rpx;
  padding-left: 20%;
  padding-right: 20%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding: 0 30rpx;
  height: 100rpx;
  // border-radius: 20rpx;
  background: #faf9e3;
}
.invite-item:nth-child(even){
  // margin-top: 30rpx;
  padding-left: 20%;
  padding-right: 20%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding: 0 30rpx;
  height: 100rpx;
  // border-radius: 20rpx;
  background: #f4ffed;
}
.invite-item .avatar{
  flex:none;
  margin-right: 28rpx;
  width: 92rpx;
  height: 92rpx;
  border-radius: 6rpx;
  overflow: hidden;
  // background: #F7F7F7;
}
.invite-item .avatar image{
  width: 92rpx;
  height: 92rpx;
}
.invite-item .name-wrapper {
  margin-bottom: 14rpx;
}
.invite-item .name{
  max-width: 250rpx;
  line-height: 1.5;
  font-size: 28rpx;
  font-weight: 400;
  color: $uni-text-color;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invite-item .real-name {
  background: #ffaa00;
  padding: 2rpx 6rpx;
  margin-left: 20rpx;
  border-radius: 4rpx;
  color: #fff;
  font-size: 18rpx;
}
.invite-item .pay_money {
  background: #1a73e8;
  padding: 2rpx 6rpx;
  margin-left: 20rpx;
  border-radius: 4rpx;
  color: #fff;
  font-size: 18rpx;
}
.invite-item .mobile,
.invite-item .date{
  line-height: 1.5;
  font-size: 22rpx;
  font-weight: 400;
  color: $uni-text-color-grey;
}
.invite-item .date{
  position: absolute;
  top: 35rpx;
  right: 30rpx;
}
.invite-list .loading-text{
  margin:20rpx;
  text-align: center;
  color: $uni-text-color-grey;
  font-size: 22rpx;
}
.invite-list .loading-text.no-data{
  line-height: 90vh;
}
</style>


